<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03猜数字</title>
</head>
<body>
<!--<button onclick="alert('警告信息!')">测试警告框</button>-->
<!--<button onclick="confirm('你确定要关闭吗?')">测试确认框</button>-->
<!--<button onclick="prompt('请输入你的设备识别码')">测试输入框</button>-->
<!--<hr>-->
<h3>已生成一个1~100之间的随机数:</h3>
<input type="text" placeholder="请输入你猜的数字">
<button onclick="guess()">点我验证</button>
<h3>小提示:<span></span></h3>

<script>
    //1.生成一个1~100之间的随机整数
    //Math.random();//[0,1)之间的随机小数
    //[0,100)+1=[1,101)
    let r = parseInt(Math.random()*100)+1;
    console.log("打个小抄:"+r);
    //定义变量用来保存猜数字的次数
    let count = 0;
    function guess() {
        let n = document.querySelector("input").value;
        if(isNaN(n)){
            alert('请输入数字!');
            return;
        }
        //获取span元素用来显示结果
        let spanE = document.querySelector("span");
        //比较用户输入的数字n与生成的随机数r
        count++;
        if(n>r){
            spanE.innerHTML = "猜大了!";
        }else if(n<r){
            spanE.innerHTML = "猜小了!";
        }else{
            spanE.innerHTML = "恭喜你用了"+count+"次就猜对了!";
        }
    }
</script>
</body>
</html>